<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <img src="" alt="">
    <script>
        // 获取屏幕高度
        const viewHeight = window.innerHeight;

        function lazyLoad() {
            // 获取所有图片
            const images = document.querySelectorAll('img');
            // 遍历所有图片
            images.forEach(image => {
                // 获取图片距离顶部的高度
                const rect = image.getBoundingClientRect();
                // 如果图片在可视区域内
                if (rect.top < viewHeight && rect.bottom > 0) {
                    // 加载图片
                    image.src = image.dataset.origin;
                }

            });
            // 移除事件监听
            window.removeEventListener('scroll', lazyLoad);
        }
        // 监听滚动事件
        window.addEventListener('scroll', lazyLoad);
        // 初始化
        lazyLoad();

    </script>
</body>

</html>